<template>
  <div class="page">
    <!-- 搜索页面 -->
    <el-form
      :model="attendanceRecordSearch"
      size="small"
      :inline="true"
      class="query-form"
      > 
      <el-form-item prop="date">
        <el-date-picker
          v-model="attendanceRecordSearch.date"
          format="yyyy-MM"
          value-format="yyyy-MM"
          type="month"
          size="small"
          :clearable="false"
          placeholder="请选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="username">
        <el-input
          size="small"
          v-model="attendanceRecordSearch.username"
          autocomplete="off"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="department">
        <el-select
          v-model="attendanceRecordSearch.office"
          placeholder="请选择部门"
          style="width: 100%"
          size="small"
          >      
          <el-option
            v-for="(item, index) in offices"
            :label="item.name"
            :value="item.id"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input
          size="small"
          v-model="attendanceRecordSearch.phone"
          autocomplete="off"
          maxlength="11"
          placeholder="电话"
        ></el-input>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button size="small" type="primary" @click="getCompleteDocumentation"
          >查询</el-button
        >
        <el-button size="small" style="margin-left: 10px" @click="resetSearch"
          >重置</el-button
        >  </el-form-item
      >                              
    </el-form>
    <div class="top" style="background-color: #fff; padding: 10px">
      <el-tabs
        type="border-card"
        @tab-click="handleClick"
        v-model="attachedListNum"
        style="padding: 10px 0px"
      >
        <el-tab-pane
          v-for="(item, index) in attachedList"
          :key="index"
          :label="item.name"
          :name="item.name"
        >
          <el-table
            :data="attachedListTable"
            ref="attachedListTables"
            height="calc(100% - 80px)"
            :cell-style="cellStyle"
            style="border: 1px solid #d6cfe2; min-height: 380px"
            size="small"
            :header-cell-class-name="cellHeadStyle"
            :row-class-name="tableRowClassName"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            v-loading="loading"
            @cell-click="cellDetail"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column
              prop="username"
              label="姓名"
              align="center"
              width="100"
              fixed="left"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="office.name"
              label="部门"
              width="100"
              align="center"
              content="提示文字"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="phone" label="电话" width="110" show-overflow-tooltip  align="center">
					    <template slot-scope="scope">{{scope.row.phone?scope.row.phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"):""}}</template>
                    </el-table-column>
            <el-table-column width="50"   align="center" prop="one" label="1">
              <template slot-scope="scope">
                <div v-if="scope.row.one == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.one == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.one == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.one == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.one == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.one == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.one == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.one == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.one == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.one == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="two" label="2" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.two == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.two == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.two == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.two == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.two == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.two == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.two == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.two == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.two == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.two == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="three" label="3" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.three == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.three == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.three == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.three == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.three == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.three == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.three == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.three == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.three == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.three == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="four" label="4" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.four == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.four == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.four == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.four == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.four == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.four == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.four == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.four == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.four == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.four == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="five" label="5" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.five == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.five == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.five == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.five == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.five == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.five == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.five == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.five == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.five == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.five == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="six" label="6" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.six == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.six == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.six == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.six == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.six == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.six == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.six == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.six == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.six == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.six == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="seven" label="7" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.seven == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.seven == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.seven == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.seven == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.seven == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.seven == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.seven == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.seven == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.seven == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.seven == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="eight" label="8" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.eight == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.eight == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.eight == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.eight == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.eight == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.eight == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.eight == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.eight == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.eight == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.eight == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="nine" label="9" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.nine == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.nine == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.nine == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.nine == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.nine == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.nine == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.nine == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.nine == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.nine == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.nine == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="ten" label="10" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.ten == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.ten == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.ten == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.ten == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.ten == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.ten == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.ten == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.ten == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.ten == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.ten == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="eleven" label="11" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.eleven == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.eleven == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.eleven == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.eleven == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.eleven == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.eleven == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.eleven == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.eleven == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.eleven == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.eleven == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twelve" label="12" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twelve == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twelve == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twelve == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twelve == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twelve == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twelve == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twelve == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twelve == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twelve == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twelve == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="thirteen" label="13" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.thirteen == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.thirteen == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.thirteen == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.thirteen == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.thirteen == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.thirteen == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.thirteen == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.thirteen == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.thirteen == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.thirteen == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fourteen" label="14" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.fourteen == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.fourteen == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.fourteen == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.fourteen == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.fourteen == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.fourteen == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.fourteen == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.fourteen == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.fourteen == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.fourteen == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fifteen" label="15" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.fifteen == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.fifteen == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.fifteen == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.fifteen == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.fifteen == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.fifteen == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.fifteen == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.fifteen == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.fifteen == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.fifteen == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sixteen" label="16" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.sixteen == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.sixteen == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.sixteen == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.sixteen == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.sixteen == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.sixteen == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.sixteen == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.sixteen == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.sixteen == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.sixteen == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="seventeen" label="17" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.seventeen == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.seventeen == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.seventeen == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.seventeen == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.seventeen == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.seventeen == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.seventeen == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.seventeen == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.seventeen == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.seventeen == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="eighteen" label="18" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.eighteen == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.eighteen == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.eighteen == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.eighteen == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.eighteen == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.eighteen == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.eighteen == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.eighteen == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.eighteen == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.eighteen == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="nineteen" label="19" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.nineteen == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.nineteen == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.nineteen == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.nineteen == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.nineteen == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.nineteen == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.nineteen == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.nineteen == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.nineteen == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.nineteen == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twenty" label="20" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twenty == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twenty == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twenty == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twenty == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twenty == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twenty == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twenty == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twenty == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twenty == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twenty == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twentyone" label="21" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twentyone == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyone == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twentyone == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyone == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyone == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twentyone == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyone == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyone == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyone == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyone == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twentytwo" label="22" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twentytwo == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twentytwo == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twentytwo == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentytwo == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twentytwo == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twentytwo == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twentytwo == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twentytwo == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentytwo == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twentytwo == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twentythree" label="23" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twentythree == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twentythree == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twentythree == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentythree == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twentythree == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twentythree == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twentythree == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twentythree == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentythree == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twentythree == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twentyfour" label="24" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twentyfour == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfour == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twentyfour == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfour == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfour == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twentyfour == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfour == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfour == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfour == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfour == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twentyfive" label="25" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twentyfive == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfive == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twentyfive == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfive == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfive == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twentyfive == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfive == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfive == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfive == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyfive == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twentysix" label="26" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twentysix == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twentysix == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twentysix == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentysix == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twentysix == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twentysix == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twentysix == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twentysix == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentysix == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twentysix == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twentyseven" label="27" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twentyseven == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyseven == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twentyseven == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyseven == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyseven == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twentyseven == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyseven == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyseven == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyseven == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyseven == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twentyeight" label="28" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twentyeight == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyeight == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twentyeight == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyeight == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyeight == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twentyeight == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyeight == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyeight == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyeight == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twentyeight == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="twentynine" label="29" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.twentynine == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.twentynine == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.twentynine == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentynine == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.twentynine == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.twentynine == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.twentynine == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.twentynine == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.twentynine == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.twentynine == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="thirty" label="30" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.thirty == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.thirty == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.thirty == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.thirty == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.thirty == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.thirty == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.thirty == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.thirty == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.thirty == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.thirty == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="thirtyone" label="31" width="50"   align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.thirtyone == '正常'">
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(56, 187, 246)"
                  ></i>
                </div>
                <div v-if="scope.row.thirtyone == '迟到'">
                  <i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
                </div>
                <div v-if="scope.row.thirtyone == '早退'">
                  <i
                    class="el-icon-warning-outline"
                    style="color: rgb(184, 146, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.thirtyone == '旷工'">
                  <i
                    class="el-icon-circle-close"
                    style="color: rgb(253, 116, 142)"
                  ></i>
                </div>
                <div v-if="scope.row.thirtyone == '漏签'">
                  <i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
                </div>
                <div v-if="scope.row.thirtyone == '请假'">
                  <i
                    class="el-icon-s-claim"
                    style="color: rgb(77, 194, 247)"
                  ></i>
                </div>
                <div v-if="scope.row.thirtyone == '出差'">
                  <i
                    class="el-icon-s-promotion"
                    style="color: rgb(72, 198, 80)"
                  ></i>
                </div>
                <div v-if="scope.row.thirtyone == '外出'">
                  <i
                    class="el-icon-suitcase"
                    style="color: rgb(90, 147, 255)"
                  ></i>
                </div>
                <div v-if="scope.row.thirtyone == '加班'">
                  <i
                    class="el-icon-alarm-clock"
                    style="color: rgb(141, 107, 243)"
                  ></i>
                </div>
                <div v-if="scope.row.thirtyone == '公休'">
                  <i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="attachedListHandleSize"
            @current-change="attachedListHandleCurrent"
            :current-page.sync="attachedListPageNo"
            :page-size="attachedListPageSize"
            layout="total, prev, pager, next, jumper"
            :total="attachedListTotal"
          >
          </el-pagination>
        </el-tab-pane>
        <div class="icon">
          <i class="el-icon-star-on" style="margin: 0 2px"></i>
          <span>图标说明:</span>
          <div class="icon_tb">
            <i
              class="el-icon-circle-check"
              style="color: #00b7ee; font-size: 16px; margin: 0 2px"
            ></i>
            正常
          </div>
          <div class="icon_tb">
            <i
              class="el-icon-bell"
              style="color: #FF0000; font-size: 16px; margin: 0 2px"
            ></i>
            迟到
          </div>
          <div class="icon_tb">
            <i
              class="el-icon-warning-outline"
              style="color: #b892ff; font-size: 16px; margin: 0 2px"
            ></i>
            早退
          </div>
          <div class="icon_tb">
            <i
              class="el-icon-circle-close"
              style="color: #fd748e; font-size: 16px; margin: 0 2px"
            ></i>
            旷工
          </div>
          <div class="icon_tb">
            <i
              class="el-icon-stopwatch"
              style="color: #d155e9; font-size: 16px; margin: 0 2px"
            ></i>
            漏签
          </div>
          <div class="icon_tb">
            <i
              class="el-icon-s-claim"
              style="color: #4dc2f7; font-size: 16px; margin: 0 2px"
            ></i>
            请假
          </div>
          <div class="icon_tb">
            <i
              class="el-icon-s-promotion"
              style="color: #48c650; font-size: 16px; margin: 0 2px"
            ></i>
            出差
          </div>
          <div class="icon_tb">
            <i
              class="el-icon-suitcase"
              style="color: #ff9a17; font-size: 16px; margin: 0 2px"
            ></i>
            外出
          </div>
          <div class="icon_tb">
            <i
              class="el-icon-alarm-clock"
              style="color: #8d6bf3; font-size: 16px; margin: 0 2px"
            ></i>
            加班
          </div>
          <div class="icon_tb">
            <i
              class="el-icon-s-home"
              style="color: #999999; font-size: 16px; margin: 0 2px"
            ></i>
            公休
          </div>
        </div>
        <div style="font-size: 11px">
          <div>
            <i class="el-icon-s-grid" style="padding-left: 2px"></i>
            打卡明细
          </div>
        </div>
        <div style="margin-top: 10px">
          <template>
            <el-table
              :data="checkDetailsTable"
              :cell-style="cellStyle"
              style="border: 1px solid #d6cfe2"
              size="small"
              :header-cell-class-name="cellHeadStyle"
              :row-class-name="tableRowClassName"
              row-key="id"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              v-loading="checkDetailsLoading"
              :empty-text="emptyText"
            >
              <el-table-column prop="name" label="姓名" align="center"></el-table-column>
              <el-table-column prop="department.name" label="部门">
              </el-table-column>
              <el-table-column prop="date" label="日期"> </el-table-column>
              <el-table-column prop="worktime" label="工作时段">
              </el-table-column>
              <el-table-column prop="time" label="签到时间/体温">
              </el-table-column>
              <el-table-column prop="time2" label="签退时间/体温">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import tableStyles from "../../../../utils/mixins.js";
export default {
  mixins: [tableStyles],
  data() {
    return {
      // 公司ID
      companyId: "",
      //搜索对象
      attendanceRecordSearch: {
        date: "",
        office: "",
        username: "",
        phone: "",
      },
      offices: [], //部门的数组

      attachedListNum: "全部记录", //tab标签绑定值
      attachedList: [
        { name: "全部记录" },
        { name: "迟到" },
        { name: "早退" },
        { name: "请假" },
        { name: "出差" },
        { name: "外出" },
        { name: "加班" },
      ],
      attachedListTable: [], //附表数据数组
      attachedListPageNo: 1, //页码
      attachedListPageSize: 10, //每页几条
      attachedListTotal: 0, //总条数
      loading: "",
      statusType: "", //除全部记录外其他接口不同状态

      checkDetailsTable: [], //打卡明细数组
      checkDetailsLoading: "",
      emptyText: "点击上述日历查看每天的打卡明细", //初始明细为空提示
      day: "",
      cellid: "",
    };
  },
  //接收ID参数
  created() {
    this.companyId = this.$route.query.id;
  },
  mounted() {
    this.getOffices(); //部门
    this.getCurrentDate();
    this.handleClick();
  },
  methods: {
    //当前日期
    getCurrentDate() {
      var date = new Date();
      var y = date.getFullYear();
      var m =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var d = date.getDate();
      this.attendanceRecordSearch.date = y + "-" + m;
    },
    // ------------------------------------------------------
    //部门查询
    getOffices() {
      this.$http({
        url: "/sys/person/findOffice",
        method: "get",
        params: {
          companyId: this.companyId,
        },
      }).then(({ data }) => {
        // console.log("部门",data);
        if (data) {
          this.offices = data.children;
        }
      });
    },
    //重置搜索
    resetSearch() {
      this.attendanceRecordSearch.username = "";
      this.attendanceRecordSearch.phone = "";
      this.attendanceRecordSearch.office = "";
      this.getCurrentDate();
      this.getCompleteDocumentation();
    },

    handleClick(tab, event) {
      switch (this.attachedListNum) {
        case "全部记录":
          this.getCompleteDocumentation();
          break;
        case "迟到":
          this.getDetails(1);
          break;
        case "早退":
          this.getDetails(2);
          break;
        case "请假":
          this.getDetails(3);
          break;
        case "出差":
          this.getDetails(4);
          break;
        case "外出":
          this.getDetails(5);
          break;
        case "加班":
          this.getDetails(6);
          break;
      }
    },

    //附表翻页
    attachedListHandleSize(val) {
      this.attachedListPageSize = val;
      this.attachedListPageNo = 1;
      this.getCompleteDocumentation();
    },
    attachedListHandleCurrent(val) {
      this.attachedListPageNo = val;
      this.getCompleteDocumentation();
    },
    //查询全部记录
    getCompleteDocumentation() {
      this.loading = true;
      this.$http({
        url: "/sys/person/findCheckin",
        method: "get",
        params: {
          //一定要设置name，才可以传params
          pageNo: this.attachedListPageNo,
          pageSize: this.attachedListPageSize,
          companyId: this.companyId,
          date: this.attendanceRecordSearch.date,
          ...this.attendanceRecordSearch,
        },
      }).then(({ data }) => {
        // console.log(data);
        if (data) {
          this.attachedListTable = data.page;
          if (this.attachedListTable.length == 0) {
            this.attachedListTotal = 0;
          } else {
            this.attachedListTotal = data.totalCount;
          }
          this.loading = false;
        }
      });
    },

    //剩余页面查询接口  迟到 早退 请假 出差 外出 加班
    getDetails(id) {
      this.loading = true;
      this.$http({
        url: "/sys/person/selectByType",
        method: "get",
        params: {
          //一定要设置name，才可以传params
          pageNo: this.attachedListPageNo,
          pageSize: this.attachedListPageSize,
          companyId: this.companyId,
          date: this.attendanceRecordSearch.date,
          type: id,
        },
      }).then(({ data }) => {
        // console.log(data);
        if (data && data.success) {
          this.attachedListTable = data.list;
          if (this.attachedListTable.length == 0) {
            this.attachedListTotal = 0;
          } else {
            this.attachedListTotal = data.totalCount;
          }
          this.loading = false;
        }
      });
    },
    //打卡明细
    cellDetail(row, column, event, cell) {
      // console.log(row,column)
      this.cellid = row.sysuserid;
      // 点击表格获取日
      this.day = column.label;
      if (
        column.className == "el-table-column--selection" ||
        this.day == "姓名" ||
        this.day == "部门" ||
        this.day == "电话"
      ) {
        this.checkDetailsTable = [];
        return false;
      }
      if (this.day < 10) {
        this.day = "0" + this.day;
      }
      var dateOfTime = this.attendanceRecordSearch.date + "-" + this.day;
      this.checkDetailsLoading = true;
      this.$http({
        url: "/sys/user/userCheckin/selectchickdetail",
        method: "get",
        params: {
          //一定要设置name，才可以传params
          dateOfTime: dateOfTime,
          userid: this.cellid,
        },
      }).then(({ data }) => {
        // console.log(data);
        if (data && data.success) {
          this.checkDetailsTable = data.list;
          if (this.checkDetailsTable.length == 0) {
            this.emptyText = "暂无数据";
          }
          this.checkDetailsLoading = false;
        }
      });
    },
  },
};
</script>
<style scoped>
.icon {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0 0 1rem;
  align-items: center;
  font-size: 11px;
}

.icon_tb {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 11px;
  color: black;
  margin-right: 10px;
}
/deep/ .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
</style>